<template>
    <el-dialog
            :title="'订单详情'"
            :close-on-click-modal="false"
            width="50%"
            :visible.sync="visible">
        <el-form :model="dataForm" ref="dataForm" label-width="100px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="商品名称" prop="productName">
                        <el-input readonly v-model="dataForm.productName" placeholder="商品名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="商品单价" prop="productPrice">
                        <el-input readonly v-model="dataForm.productPrice" placeholder="商品单价"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="11">
                    <el-form-item label="购买商品数量" prop="productNum">
                        <el-input readonly v-model="dataForm.productNum" placeholder="购买商品数量"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="支付金额" prop="payAmount">
                        <el-input readonly v-model="dataForm.payAmount" placeholder="支付金额"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="11">
                    <el-form-item label="创建时间" prop="createTime">
                        <el-input readonly v-model="dataForm.createTime" placeholder="创建时间"
                                  style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="支付时间" prop="payTime">
                        <el-input readonly v-model="dataForm.payTime" placeholder="支付时间"
                                  style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="11">
                    <el-form-item label="支付状态" prop="status">
                        <el-input readonly v-if="dataForm.status===0" value='待支付' placeholder="支付状态"></el-input>
                        <el-input readonly v-if="dataForm.status===1" value='已支付' placeholder="支付状态"></el-input>
                        <el-input readonly v-if="dataForm.status===2" value='支付失败'
                                  placeholder="支付状态"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item v-if="dataForm.status===2" label="支付失败原因" prop="payResoult">
                        <el-input readonly v-if="dataForm.payResoult===0" value="取消支付"
                                  placeholder="支付失败原因"></el-input>
                        <el-input readonly v-if="dataForm.payResoult===1" value="库存不足"
                                  placeholder="支付失败原因"></el-input>
                        <el-input readonly v-if="dataForm.payResoult===2" value="支付逾期"
                                  placeholder="支付失败原因"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">确定</el-button>
      <el-button v-if="dataForm.status===0" type="danger" @click="cancelOrderHandle(dataForm.id)">取消订单</el-button>
    </span>
    </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
    props: {
        getDataList: Function
    },
    data() {
        return {
            visible: false,
            dataForm: {
                id: 0,
                productName: '',
                productPrice: '',
                productNum: '',
                payAmount: '',
                createTime: '',
                status: '',
                payTime: '',
                payResoult: ''
            },
        }
    },
    methods: {
        init(id) {
            this.dataForm.id = id || 0
            this.visible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields()
                if (this.dataForm.id) {
                    request.get(`/order/user/info/${this.dataForm.id}`).then((response) => {
                        if (response.data && response.data.code === 200) {
                            this.dataForm.productName = response.data.order.productName
                            this.dataForm.productPrice = response.data.order.productPrice
                            this.dataForm.productNum = response.data.order.productNum
                            this.dataForm.payAmount = response.data.order.payAmount
                            this.dataForm.createTime = response.data.order.createTime
                            this.dataForm.status = response.data.order.status
                            this.dataForm.payTime = response.data.order.payTime || "空"
                            this.dataForm.payResoult = response.data.order.payResoult
                        }
                    })
                }
            })
        },
        cancelOrderHandle(id) {
            this.$confirm(`确定取消订单[id=${id}]`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post(`/order/user/cancelOrder/${this.dataForm.id}`)
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.getDataList()
                            this.visible = false
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                            })
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).catch(() => {
                    //用户点击取消按钮
                    this.$message.info("已取消")
                });
            })
        }
    }
}
</script>
